<template>
  <v-bottom-navigation
    app
    grow
    shift
    :value="value"
    active-class="white--text"
    background-color="appbar"
    class="white--text"
    v-if="$vuetify.breakpoint.smAndDown"
  >
    <v-btn
      v-for="(content, index) in bottomContent"
      :key="index"
      @click="toPath(index)"
    >
      <span class="white--text">{{ content.text }}</span>
      <v-icon class="iconfont white--text">{{ content.icon }}</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>



<script>
export default {
  data() {
    return {
      value: 100,
      bottomContent: [
        { icon: "\ue60c", text: "首页", path: "/home" },
        { icon: "\ue60b", text: "挂号", path: "/registration" },
        { icon: "\ue856", text: "问诊", path: "/quiry" },
        { icon: "\ue619", text: "个人", path: "/personage" },
      ],
    };
  },
  computed: {
    getPath() {
      return this.$route.path;
    },
  },
  watch: {
    getPath(newVal) {
      this.bottomContent.forEach((item, index) => {
        if (item.path == newVal) {
          this.value = index;
        }
      });
    },
  },
  methods: {
    toPath(value) {
      const toPath = this.bottomContent[value].path;
      if (this.$route.path !== toPath) {
        this.$router.push(toPath);
      }
    },
  },
};
</script>



<style lang="scss" scoped>
</style>
